<template>
  <div class="accountListBox">
    <el-card>
      <div slot="header">
        <span>账号列表</span>
      </div>
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          ref="myTable"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="account" label="账号" width="180">
          </el-table-column>
          <el-table-column prop="userGroup" label="用户组" width="180">
          </el-table-column>
          <el-table-column label="日期">
            <template slot-scope="scope">
              {{ scope.row.ctime | handeTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="openDialog(scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                title="是否确认删除该账号？"
                confirm-button-type="text"
                icon="el-icon-question"
                @confirm="submitDel(scope.row.id)"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="changeCurrent"
          @size-change="changeSize"
        >
        </el-pagination>
        <div class="btns">
          <el-button type="danger" @click="submitDelAll">批量删除</el-button>
          <el-button type="primary" @click="cancelChoose">取消选择</el-button>
        </div>
      </div>
    </el-card>

    <!-- 弹窗组件 -->
    <el-dialog title="编辑账号" :visible.sync="dialogVisible" width="400px">
      <el-form label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="editForm.account"></el-input>
        </el-form-item>
        <el-form-item label="用户组">
          <el-select
            placeholder="请选择用户组"
            value="超级管理员"
            v-model="editForm.userGroup"
          >
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  $_user_list,
  $_user_edit,
  $_user_del,
  $_user_batchdel,
} from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      total: 0, //总的条数
      currentPage: 1, //当前页数
      pageSize: 3, //一页多少条
      dialogVisible: false,
      editForm: {
        account: "",
        userGroup: "",
        id: "",
      },
      ids: [],
    };
  },
  created() {
    // 第一次进入界面，渲染表格数据和分页数据
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      $_user_list({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        // 赋值分页总数
        this.total = res.data.total;

        // 赋值渲染表格数组
        this.tableData = res.data.data;
      });
    },
    // 跳转分页数据
    changeCurrent(page) {
      // 把当前页数更新
      this.currentPage = page;
      this.getData();
    },
    // 修改一夜多少条数据
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    // 打开编辑的弹窗
    openDialog(row) {
      this.editForm.account = row.account;
      this.editForm.userGroup = row.userGroup;
      this.editForm.id = row.id;
      this.dialogVisible = true;
    },
    // 点击确认编辑操作
    submitEdit() {
      $_user_edit(this.editForm).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });

          this.dialogVisible = false;

          // 每一次密码编辑完成之后，要把当前数据重新加载一次
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    // 删除操作
    submitDel(id) {
      $_user_del({ id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });

          // 每一次密码编辑完成之后，要把当前数据重新加载一次
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    // 取消选择
    cancelChoose() {
      this.$refs.myTable.clearSelection();
    },
    // 每一次checkbox发生了变化
    selectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 批量删除提交
    submitDelAll() {
      if (this.ids.length === 0) {
        return;
      }
      $_user_batchdel({
        ids: this.ids,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });

          this.getData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.btns {
  margin-top: 20px;
}
.el-input {
  width: 199px;
}
.el-button {
  margin-left: 10px;
}
</style>